<template>
  <div class="Product">
    <div class="diagram">
      <img
        src="@/assets/images/product/logo9.jpg"
        alt="modification"
        style="width: 100%; height: 360px"
      />
    </div>
    <div class="tab-tit">
      <p><b>{{$tc('content.Productdisplay')}}</b></p>
      <span
        >{{$t('content.Location')}} ->
        <a href="http://www.tzmc.com/productDisplay">{{$tc('content.Productdisplay')}}</a>
      </span>
    </div>
    <div>
      <el-tabs v-model="activeName" @tab-click="handleCurrentChange">
        <el-tab-pane :label="$t('content.Molds')" name="first">
          <div class="content1">
            <ul class="TouchToo">
              <div v-for="item in this.list1" :key="item.id" class="boss">
                <li><img :src="item.product_image" alt="" /></li>
                <p class="product-name">{{ item.product_name_zh }}</p>
              </div>
            </ul>
          </div>
        </el-tab-pane>
        <el-tab-pane :label="$t('content.Products')" name="second">
          <div class="content2">
            <ul class="product">
              <div v-for="eat in this.list2" :key="eat.id" class="bosses">
                <li><img :src="eat.product_image" alt="" /></li>
                <p class="product-name">{{ eat.product_name_zh }}</p>
              </div>
            </ul>
            <el-pagination
                small
                background
                layout="prev, pager, next"
                :current-page.sync="currentPage"
                :total="20"
                class="mt-4"
                @prev-click="prevPage"
                @next-click="nextPage"
                @current-change="handleCurrentChange"
              />
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import axios from "axios";

export default {
  data() {
    return {
      activeName: "first",
      list1: [],
      list2: [],
    };
  },
  created() {
    this.getData();
    this.getPostData();
  },
  methods: {
    getData() {
      axios.get("/api/api/product?page=1").then((res) => {
        this.list1 = res.data[0].data;
        console.log(this.list1);

      });
    },
    getPostData(i = 1) {
      let page = i;
      axios.get("/api/api/product?page=" + page).then((res) => {
        this.list2 = res.data[1].data;
        console.log(this.list2);
      });
    },
    // handleClick(tab, event) {
    //   console.log(tab, event);
    // },
    handleCurrentChange(i) {
      this.getPostData(i);
    },
  },
};
</script>
<style scoped>
@import '..//assets/css/productdisplay.css';
::v-deep .el-tabs__item {
      font-size: 20px;
      margin: 25px 0px;
    }
</style>